<template>
    <el-card
        shadow="never"
        style="width: 1600px; margin: 40px auto;"
    >
        <el-row
            v-for="(item, index) in products2D"
            :key="index"
            style="width: 1600px;"
        >
            <el-col
                v-for="(subItem, subIndex) in item"
                :key="subIndex"
                :span="6"
                style="margin-bottom: 40px;"
            >
                <el-card style="width: 370px; margin-bottom: 10px; backgroundColor: #e3eaf2;">
                    <img
                        :src="showUrl + subItem.id"
                        style="width:370px; height: 230px;"
                        alt=""
                    >
                    <div
                        class="title"
                        style="height: 58px;text-align:center;"
                    >
                        {{subItem.titleZh}}
                    </div>
                    <div
                        class="content"
                        style="height: 60px;margin-bottom:14px; margin-left: 24px; margin-right: 24px;font-size: 14px;line-height: 22px;"
                        v-html="subItem.content"
                    >
                    </div>
                    <div style="height: 42px;text-align:center; margin-bottom: 8px;">
                        <el-button
                            type="primary"
                            @click="toProductShow(subItem.titleEn, subItem.id)"
                        >查看详情</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            showUrl: this.$uploadPath + "/product/getImage?id=0",
            products: [],
            products2D: []
        };
    },
    methods: {
        getProducts() {
            this.$http("/product/getAll")
                .then(response => {
                    this.products = response.data;
                    // 截取content的前55个字符，并加上省略号
                    for (var i = 0; i < this.products.length; i++) {
                        this.products[i]["content"] =
                            this.products[i]["content"].substring(0, 58) + "……";
                    }
                    this.products2D = this.changeArray(this.products);
                })
                .catch(err => err);
        },
        toProductShow(title, id) {
            this.$router
                .push({ path: title, query: { id: id } })
                .catch(err => err);
        },
        // 获取图片数组的长度
        getImagesLength() {
            var i = 0;
            for (var image in this.images) {
                i++;
            }
            return i;
        },
        // 将一维数组转化为二维数组
        changeArray(a) {
            // 定义一个空数组c
            var c = [];
            // 先获取数组的长度
            var len = 0;
            for (var i in a) {
                len++;
            }
            var b = [];
            for (var i = 0; i < len; i++) {
                // 每隔三个创建一个数组，将三个对象保存到数组b中
                b.push(a[i]);
                if ((i + 1) % 4 == 0 || i == len - 1) {
                    c.push(b);
                    b = [];
                }
            }
            return c;
        }
    },
    mounted() {
        this.getProducts();
    }
};
</script>

<style>
.product_introduce {
    width: 400px;
    height: 300px;
}
.product_introduce .el-card__header {
    border-bottom: none;
}
.soft .el-card__body {
    padding: 0;
}
.soft .title {
    text-align: center;
    font-family: "微软雅黑";
    font-size: 18px;
    /* color: #017ad5; */
    line-height: 58px;
    font-weight: bold;
    height: 58px;
    text-align: center;
}
.soft .el-button--primary {
    border: none;
    background-color: #017ad5;
    width: 148px;
    height: 42px;
}
</style>